<template>
	<view>
		<view class="content">
			<view class="row">
				<view class="nominal">
					预约人
				</view>
				<view class="input">
					<input placeholder="请输入预约人姓名" type="text" v-model="name" placeholder-style="font-size:14px; color:#333;" />
				</view>
			</view>
			<view class="row">
				<view class="nominal">
					电话号码
				</view>
				<view class="input">
					<input placeholder="请输入预约人电话号码" type="text" v-model="mobile" @blur="validatePhoneNumber" placeholder-style="font-size:14px; color:#333;" />
				</view>
			</view>
			<view class="row">
				<view class="nominal">
					所在地区
				</view>
				<view class="input" @tap="chooseLocation">
					{{region.label}}
				</view>
			</view>
			<view class="row">
				<view class="nominal">
					详细地址
				</view>
				<view class="input">
					<textarea v-model="detailed" auto-height="true" placeholder="输入详细地址（例：XX栋XX单元XX号）" placeholder-style="font-size:14px; color:#333;"></textarea>
				</view>
			</view>
			<view class="row">
				<view class="nominal" @tap="save">
					设置默认地址
				</view>
				<view class="input switch">
					<switch color="#269A49" :checked="isDefault" @change=isDefaultChange />
				</view>
			</view>
			<view class="tishi">
				温馨提示：地址一定要填写详细，否则影响上门服务！
			</view>
		</view>
		<view class="save" @tap="save">
			<view class="btn">
				保存地址
			</view>
		</view>
	</view>
</template>

<script>
	import amap from '@/common/SDK/amap-uni.js';
	export default {
		data() {
			return {
				commonUrl: '',
				editType: 'edit',
				id: '',
				name: '',
				mobile: '',
				detailed: '',
				isDefault: false,
				validPhone: true,
				themeColor: '#007AFF',
				region: {
					label: "请点击选择地址（例：XX省XX市XX区XX街道XX路XX小区）",
					value: [],
					cityCode: ""
				},
				lng: '',
				lat: '',
			};
		},
		onLoad() {
			this.commonUrl = this.websiteUrl()
		},
		methods: {
			onCancel(e) {
				console.log(e)
			},
			chooseLocation() {
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						const latitude = res.latitude;
						const longitude = res.longitude;
					},
					fail(res) {
						console.log("getLocation调用失败", res);
					},
				});
				uni.chooseLocation({
					success: res => {
						console.log(res)
						this.region.label = res.address + res.name
						this.lng = res.longitude
						this.lat = res.latitude
					}
				})
			},
			validatePhoneNumber() {
				this.mobile = this.mobile.trim()
			     const reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/
			     if(!reg.test(this.mobile)) {
			     	this.validPhone = false
			     } else {
			     	this.validPhone = true
			     }
			},
			isDefaultChange(e) {
				var sldefault = e.detail.value;
				if (sldefault == true) {
					this.isDefault = 1
				} else {
					this.isDefault = 0
				}
				console.log(this.isDefault)
			},
			save() {
				let data = {
					"username": this.name,
					"phone": this.mobile,
					"addr": this.region.label,
					"validPhone":this.validPhone,
					"address": this.detailed,
					"is_default": this.isDefault,
					"lng": this.lng,
					"lat": this.lat
				}
				if (!data.username) {
					uni.showToast({
						title: '请输入预约人姓名',
						icon: 'none'
					});
					return;
				}
				if (!data.phone) {
					uni.showToast({
						title: '请输入预约人电话号码',
						icon: 'none'
					});
					return;
				}
				if (!data.validPhone) {
					uni.showToast({
						title: '请输入正确格式的手机号码',
						icon: 'none'
					});
					return;
				}
				if (!data.lat) {
					uni.showToast({
						title: '请选择所在地区',
						icon: 'none'
					});
					return;
				}
				if (!data.address) {
					uni.showToast({
						title: '请输入详细地址',
						icon: 'none'
					});
					return;
				}
				uni.request({
					url: this.commonUrl + 'user-address-add',
					data: data,
					header: {
						'content-type': 'application/json' ,//自定义请求头信息
						'token':uni.getStorageSync("token")
					},
					method: 'POST',
					success: (res) => {
						if (res.data.code == 1) {
							uni.showToast({
								title: "新增成功",
								duration: 1000,
								icon: 'none'
							});
							setTimeout(() => {
								uni.navigateBack();
							}, 1000)
						} else {
							uni.showToast({
								title: res.data.msg,
								duration: 1000,
								icon: 'none'
							});
						}
					}
				});
			}
		}
	};
</script>
<style lang="scss">
	page {
		background: #fff;
	}

	.save {
		view {
			display: flex;
		}

		position: fixed;
		bottom: 20px;
		width: 100%;
		height: 120upx;
		display: flex;
		justify-content: center;
		align-items: center;

		.btn {
			box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.4);
			width: 90%;
			height: 100upx;
			border-radius: 20rpx;
			background: linear-gradient(135deg, #0fD0C3, #3ebcc5);
			color: #fff;
			justify-content: center;
			align-items: center;

			.icon {
				height: 80upx;
				color: #fff;
				font-size: 30upx;
				justify-content: center;
				align-items: center;
			}

			font-size: 30upx;
		}
	}

	.content {
		display: flex;
		flex-wrap: wrap;

		view {
			display: flex;
		}

		.row {
			width: 94%;
			padding: 0 3%;
			border-bottom: solid 1upx #eee;

			.nominal {
				width: 30%;
				height: 110upx;
				font-size: 14px;
				align-items: center;
				color: #666;
			}

			.input {
				width: 70%;
				padding: 20upx 0;
				align-items: center;
				font-size: 14px;
				color: #333;
				input{
					font-size: 14px;
				}

				&.switch {
					justify-content: flex-end;
				}

				.textarea {
					margin: 20upx 0;
					min-height: 120upx;
				}
			}

			.del {
				width: 100%;
				height: 100upx;
				justify-content: center;
				align-items: center;
				font-size: 36upx;
				color: #f06c7a;
				background-color: rgba(255, 0, 0, 0.05);
				border-bottom: solid 1upx #eee;
			}
		}
		.tishi{
			color: #666;
			width: 94%;
			padding: 0 3%;
			color: #FB6B50;
			font-size: 28rpx;
			margin-top: 30rpx;
		}
	}
</style>
